<template>
  <div style="width: 100%;height:85vh">
    <div
      class="echart"
      ref="mychart"
      id="mychart"
      :style="{ float: 'left', width: '40%', height: '200px',padding:'20px'}"
    ></div>
  </div>
  
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',//图表数据名称
            type: 'pie',//图标类型为饼图
            radius: [30, 80],//
            center: ['30%', '40%'],//饼图中心点位置
            roseType: 'area',//
            itemStyle: {
              borderRadius: 2
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      };
      const myChart = echarts.init(this.$refs.mychart);// 图标初始化

      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

